<template>
  <div class="newlyUser">
    <div class="dropdown">
      <el-button type="primary" size="mini" @click="collate()">{{ $t('btn.save') }}</el-button>
    </div>
    <el-tabs v-model="activeName" @tab-click="handleTabClick">
      <el-tab-pane class="market" :label="$t('market.info')" name="first">
        <el-form ref="purchaseRef" :model="prodValue" label-width="100px" :rules="prodValueRules">
          <el-form-item :label="$t('market.userAcc')" prop="fuseraccount">
            <el-input v-model.trim="prodValue.fuseraccount" size="mini" />
          </el-form-item>
          <el-form-item :label="$t('market.client')" prop="fname">
            <el-input v-model.trim="prodValue.fname" size="mini" />
          </el-form-item>
          <el-form-item :label="$t('market.sex')" prop="fsex">
            <el-select v-model.trim="prodValue.fsex" size="mini">
              <el-option v-for="item in sexData" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('market.userGroup')" prop="fprimarygroup">
            <el-input v-model.trim="prodValue.fprimaryGroupName" size="mini">
              <i
                slot="suffix"
                class="el-input__icon el-icon-search"
                @click="groupVisiblit=true"
              />
            </el-input>
          </el-form-item>
          <el-form-item :label="$t('market.phones')">
            <el-input v-model.trim="prodValue.fphone" size="mini" />
          </el-form-item>
          <el-form-item :label="$t('market.password')" prop="fpassword">
            <el-input v-model.trim="prodValue.fpassword" size="mini" />
          </el-form-item>
          <el-form-item :label="$t('market.explain')" prop="fdescription" style="width: 30%;">
            <el-input v-model.trim="prodValue.fdescription" type="textarea" size="mini" />
          </el-form-item>
        </el-form>
        <div style="margin-top: 10px;">
          <el-button size="mini" style="margin-bottom: 5px;" @click="newHang">{{ $t('btn.newHang') }}<!--新增行--></el-button>
          <el-button size="mini" style="margin-bottom: 5px;" @click="delHang">{{ $t('btn.delHang') }}<!--删除行--></el-button>
        </div>
        <jc-table
          :table-data="tableData"
          :table-header="tableHeader"
          serial
          :table-height="tableHeight"
          @rowClick="rowClick"
        >
          <el-table-column :label="$t('market.roleName')" prop="fpkId" width="160" align="center">
            <template slot-scope="scope">
              <el-autocomplete
                v-model.trim="scope.row.fname"
                highlight-first-item
                popper-class="my-autocomplete"
                :fetch-suggestions="querySearch16"
                size="mini"
                @focus="handleRule"
                @select="primaryRule"
              >
                <i
                  slot="suffix"
                  class="el-input__icon el-icon-search"
                  @click="ruleFbi(scope.$index)"
                />
                <template slot-scope="{ item }">
                  <div class="name">{{ item.name }}</div>
                </template>
              </el-autocomplete>
            </template>
          </el-table-column>
        </jc-table>
      </el-tab-pane>
    </el-tabs>
    <!--  用户分组  -->
    <user-group v-if="groupVisiblit" @group="primaryGroup" />
    <!--  角色  -->
    <user-rule v-if="roleVisiblit" @rule="primaryRule" />
  </div>
</template>

<script>
import userGroup from '@/views/basic/users/components/userGroup'
import userRule from '@/views/basic/users/components/userRule'
import {
  insertTSecUser
} from '@/api/basicManagement/userslist'
import autocomplete from '@/views/market/marketManage/createMarkerOrder/components/autocomplete'
export default {
  components: {
    userGroup,
    userRule
  },
  mixins: [autocomplete],
  data() {
    return {
      activeName: 'first',
      prodValue: {
        fuseraccount: '',
        fname: '',
        fprimarygroup: '',
        fsex: 0,
        fphone: '',
        fpassword: '123456',
        fdescription: '',
        roleList: []
      },
      groupVisiblit: false, // 用户分组
      roleVisiblit: false, // 角色编码
      tableData: [{
        fpkId: '',
        fname: ''
      }],
      indexSelf: 0,
      tableHeader: [],
      tableHeight: '65vh',
      sexData: [
        { label: this.$t('market.man'), value: 0 }, // 男
        { label: this.$t('market.woman'), value: 1 } // 女
      ],
      prodValueRules: {
        fuseraccount: { required: true, message: '请输入用户账号', trigger: 'blur' },
        fname: { required: true, message: '请输入用户名称', trigger: 'blur' },
        fprimarygroup: { required: true, message: '请输入用户分组', trigger: 'change' },
        fpassword: { required: true, message: '请输入密码', trigger: 'blur' }
      }
    }
  },
  created() {
    this.tableHeight = window.innerWidth > 1440 ? 'calc(100vh - 300px)' : '65vh'
  },
  methods: {
    // 保存
    collate() {
      this.tableData.forEach(item => {
        this.prodValue.roleList.push(
          item.fpkId
        )
      })
      const DATA = {
        formId: 'sec_user',
        ...this.prodValue
      }
      insertTSecUser(DATA).then(res => {
        if (res.code === 0) {
          this.prodValue = {
            fuseraccount: '',
            fname: '',
            fprimarygroup: '',
            fsex: 0,
            fphone: '',
            fpassword: '888888',
            fdescription: '',
            roleList: []
          }
          this.tableData = []
          this.$router.push({ path: `/editUser/${res.data}` })
          this.$message({ duration: 1000, showClose: true, message: res.message, type: 'success' })
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 点击操作记录
    handleTabClick(tab) {
      if (tab.name === 'second') {
        // 操作记录
      }
    },
    // 获取用户分组
    primaryGroup(ev) {
      if (ev.fid) {
        this.prodValue.fprimarygroup = ev.fid
        this.prodValue.fprimaryGroupName = ev.fname
      }
      this.groupVisiblit = false
    },
    // 点击角色编码
    ruleFbi(index) {
      this.indexSelf = index
      this.roleVisiblit = true
    },
    // 角色编码
    primaryRule(ev) {
      if (ev.fpkId) {
        this.tableData[this.indexSelf].fpkId = ev.fpkId
        this.tableData[this.indexSelf].fname = ev.name
      }
      this.roleVisiblit = false
    },
    // 新增行
    newHang() {
      const data = {
        fpkId: '',
        fname: ''
      }
      this.tableData.push(data)
    },
    // 单击行
    rowClick(row) {
      this.indexSelf = row.index
    },
    // 删除行
    delHang() {
      this.tableData.splice(this.indexSelf, 1)
    }
  }
}
</script>

<style scoped lang="scss">
.newlyUser {
  @include listBom;
  .el-input::v-deep .el-input__inner {
    height: 30px;
    line-height: 30px;
  }
  .el-form {
    display: flex;
    flex-wrap: wrap;

    .el-form-item {
      height: 30px;
      width: 275px;
      margin-bottom: 10px;
      .btnType {
        margin-right: 20px;
      }

      .el-date-editor.el-input {
        width: 100% !important;
      }

      .el-select {
        width: 100%;
      }
    }
  }
}
</style>
